TL;DR

這篇不需要修改 JavaFX 元件的程式碼，就能透過 User Agent Stylesheet 載入 CSS，改變 JavaFX 的畫面風格。可以在啟動 ABCL 時使用 CLI 參數指定樣式，也可以在程式中呼叫setUserAgentStylesheet設定樣式。

透過 CLI 參數載入 CSS

JavaFX接受由啟動JAVA時，傳入的系統特性-Djavafx.userAgentStylesheetUrl=[URL]，設定使用的CSS檔案，變更程式畫面的風格。同樣可以調整啟動ABCL的方式，接受當前執行目錄的file:mystyle.css檔案作爲主題風格：

# 增加 `-Djavafx.userAgentStylesheetUrl="file:mystyle.css" `
java --enable-native-access=javafx.graphics --module-path "${SDK_PATH}" --add-modules=javafx.controls,javafx.fxml,javafx.graphics --add-opens java.base/java.lang=ALL-UNNAMED -Djavafx.userAgentStylesheetUrl="file:mystyle.css" -jar "${ABCL_PATH}"

在程式中設定 CSS

除了由使用者執行時確定載入的CSS檔案，也可以透過app.setUserAgentStylesheet(URL)設定預設載入的路徑。這種方式需要修改程式碼，但不必在每次啟動時額外輸入 CLI 參數：

(defun +MY-APP.start+ (this stage)
  (prog ((java-info-scene (create-java-info-scene)))
     (#"setUserAgentStylesheet" this "file:mystyle.css" )  ;; 設定 User Agent Stylesheet
     (#"setScene" stage java-info-scene)
     (#"show" stage)))

建立 JavaFX CSS

mystyle.css檔案內容，先只是很簡單的變更Label的文字顏色：

.label {
    -fx-text-fill: green;
}

CSS的內容格式和標準的CSS無異，不過每個元素可以使用的屬性與W3C標準不同。要變更文字顏色，調整的屬性是-fx-text-fill。不同類別相關可用的屬性可以在JavaFX CSS Reference Guide查詢，以Label來說有這些CSS屬性可以設定：

• -fx-alignment
• -fx-text-alignment
• -fx-text-overrun
• -fx-wrap-text
• -fx-font
• -fx-underline
• -fx-graphic
• -fx-content-display
• -fx-graphic-text-gap
• -fx-label-padding
• -fx-text-fill
• -fx-ellipsis-string

此外Label還繼承了Control的屬性:

• -fx-skin
• -fx-focus-traversable

因為繼承Control，也就可以使用Region的屬性：

.label {
    -fx-text-fill: green;
    
    /* START: Region*/
    -fx-border-style: solid;
    -fx-border-color: blue;
    -fx-padding: 6px;
    /* END: Region*/
}

如此就幾乎可以在不變動元件程式碼的情況下，調整畫面風格。使用 CLI 參數啟動後，應該會看到 Label 文字變成綠色，並帶有藍色邊框與內距：

這個結果表示 JavaFX 已成功載入mystyle.css。接下來可以繼續使用 CSS 調整個別元素的風格，或在下一篇設定應用程式的圖示與 ABCL 資源路徑。